<template>
  <div class="points-activity-container">
    <div class="activity-content-wrapper">
      <!-- 页面标题 -->
      <div class="page-header">
        <h2>营销活动管理</h2>
        <p class="page-desc">管理积分营销活动，提升用户参与度和转化率</p>
      </div>
      <!-- 统计卡片 -->
      <div class="stats-cards">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon><Promotion /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.totalActivities }}</div>
              <div class="stat-label">总活动数</div>
            </div>
          </div>
        </el-card>
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon active">
              <el-icon><VideoPlay /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.activeActivities }}</div>
              <div class="stat-label">进行中活动</div>
            </div>
          </div>
        </el-card>
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon warning">
              <el-icon><Clock /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.pendingActivities }}</div>
              <div class="stat-label">待开始活动</div>
            </div>
          </div>
        </el-card>
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon success">
              <el-icon><User /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.totalParticipants }}</div>
              <div class="stat-label">总参与人数</div>
            </div>
          </div>
        </el-card>
      </div>
      <!-- 主要内容 -->
      <el-card class="main-content align-card">
        <div class="header">
          <div class="header-left">
            <h3>活动列表</h3>
            <span class="activity-count">共 {{ page.total }} 个活动</span>
          </div>
          <el-button type="primary" @click="openActivityDialog('add')" :icon="Plus">
            新增活动
          </el-button>
        </div>

        <!-- 筛选栏 -->
        <el-form :inline="true" :model="filter" class="filter-bar" label-width="90px">
          <el-form-item label="活动类型">
            <el-select v-model="filter.type" clearable placeholder="选择活动类型" style="width: 140px;">
              <el-option v-for="item in typeOptions" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="filter.status" clearable placeholder="选择状态" style="width: 120px;">
              <el-option label="进行中" value="进行中" />
              <el-option label="待开始" value="待开始" />
              <el-option label="已结束" value="已结束" />
              <el-option label="已暂停" value="已暂停" />
            </el-select>
          </el-form-item>
          <el-form-item label="关键词">
            <el-input v-model="filter.keyword" placeholder="活动名称/描述" clearable style="width: 180px;" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="doFilter" :icon="Search">查询</el-button>
            <el-button @click="resetFilter" :icon="Refresh">重置</el-button>
          </el-form-item>
        </el-form>

        <!-- 活动表格 -->
        <el-table 
          :data="tableData" 
          style="width: 100%" 
          :default-sort="{prop: 'createTime', order: 'descending'}"
          v-loading="loading"
          stripe
        >
          <el-table-column prop="name" label="活动名称" width="160" show-overflow-tooltip />
          <el-table-column prop="type" label="活动类型" width="120">
            <template #default="scope">
              <el-tag :type="getTypeTagType(scope.row.type)">{{ scope.row.type }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="points" label="奖励积分" width="100">
            <template #default="scope">
              <span class="points-text">{{ scope.row.points }} 积分</span>
            </template>
          </el-table-column>
          <el-table-column prop="exp" label="奖励经验值" width="100">
            <template #default="scope">
              <span v-if="scope.row.exp > 0" class="exp-text">{{ scope.row.exp }} 经验</span>
              <span v-else class="no-exp">无</span>
            </template>
          </el-table-column>
          <el-table-column label="关联优惠券" width="200">
            <template #default="scope">
              <span v-if="scope.row.couponIds && scope.row.couponIds.length">
                <el-tag v-for="cid in scope.row.couponIds" :key="cid" size="small" style="margin-right:4px;">
                  {{ publishedCoupons.find(c => c.id === cid)?.name || '未知优惠券' }}
                </el-tag>
              </span>
              <span v-else style="color:#bbb;">无</span>
            </template>
          </el-table-column>
          <el-table-column prop="participants" label="参与人数" width="100">
            <template #default="scope">
              <span class="participants-text">{{ scope.row.participants }} 人</span>
            </template>
          </el-table-column>
          <el-table-column prop="startTime" label="开始时间" width="160" />
          <el-table-column prop="endTime" label="结束时间" width="160" />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="scope">
              <el-tag :type="getStatusTagType(scope.row.status)">{{ scope.row.status }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="160" />
          <el-table-column label="操作" width="360" fixed="right">
            <template #default="scope">
              <div class="action-buttons">
                <el-button size="small" @click="editActivity(scope.row)" :icon="Edit">编辑</el-button>
                <el-button size="small" @click="openRecordDialog(scope.row)" :icon="Document">记录</el-button>
                <el-button 
                  size="small" 
                  :type="scope.row.status === '已暂停' ? 'success' : 'warning'" 
                  @click="toggleStatus(scope.row)"
                  :icon="scope.row.status === '已暂停' ? 'VideoPlay' : 'VideoPause'"
                >
                  {{ scope.row.status === '已暂停' ? '启用' : '暂停' }}
                </el-button>
                <el-button size="small" type="danger" @click="deleteActivity(scope.row)" :icon="Delete">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
          v-model:current-page="page.current"
          v-model:page-size="page.size"
          :total="page.total"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[10, 20, 50, 100]"
          style="margin-top: 20px; text-align: right;"
        />
      </el-card>
    </div>

    <!-- 新增/编辑活动弹窗 -->
    <el-dialog 
      v-model="activityDialog.visible" 
      :title="activityDialog.mode === 'add' ? '新增活动' : '编辑活动'" 
      width="700px" 
      :close-on-click-modal="false"
      destroy-on-close
    >
      <el-form :model="activityDialog.form" :rules="activityRules" ref="activityFormRef" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="活动名称" prop="name">
              <el-input v-model="activityDialog.form.name" placeholder="请输入活动名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="活动类型" prop="type">
              <el-select v-model="activityDialog.form.type" style="width: 100%" @change="onTypeChange" placeholder="请选择活动类型">
                <el-option v-for="item in typeOptions" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="奖励积分" prop="points">
              <el-input-number v-model="activityDialog.form.points" :min="1" style="width: 100%" placeholder="请输入奖励积分" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="奖励经验值" prop="exp">
              <el-input-number v-model="activityDialog.form.exp" :min="0" style="width: 100%" placeholder="可选，不填则不奖励经验值" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="选择优惠券" prop="couponIds">
          <el-select v-model="activityDialog.form.couponIds" multiple filterable placeholder="请选择优惠券">
            <el-option
              v-for="coupon in publishedCoupons"
              :key="coupon.id"
              :label="coupon.name"
              :value="coupon.id"
            />
          </el-select>
        </el-form-item>
        <el-row v-if="activityDialog.form.points > 0" :gutter="20">
          <el-col :span="12">
            <el-form-item label="积分有效期类型">
              <el-select v-model="activityDialog.form.pointsExpireType" style="width: 100%">
                <el-option label="固定天数" value="fixed" />
                <el-option label="自定义说明" value="desc" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="activityDialog.form.pointsExpireType === 'fixed'">
            <el-form-item label="有效期天数">
              <el-input-number v-model="activityDialog.form.pointsExpireValue" :min="1" style="width: 100%" placeholder="如30天" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="activityDialog.form.pointsExpireType === 'desc'">
            <el-form-item label="有效期说明">
              <el-input v-model="activityDialog.form.pointsExpireDesc" placeholder="如：积分将在活动结束后30天内有效" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="活动开始时间" prop="startTime">
              <el-date-picker 
                v-model="activityDialog.form.startTime" 
                type="datetime" 
                value-format="YYYY-MM-DD HH:mm:ss" 
                style="width: 100%" 
                placeholder="请选择开始时间" 
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="活动结束时间" prop="endTime">
              <el-date-picker 
                v-model="activityDialog.form.endTime" 
                type="datetime" 
                value-format="YYYY-MM-DD HH:mm:ss" 
                style="width: 100%" 
                placeholder="请选择结束时间" 
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 动态配置项 -->
        <div v-if="showInviteConfig" class="dynamic-config">
          <el-divider content-position="left">邀请好友配置</el-divider>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="邀请人数要求" prop="inviteCount">
                <el-input-number v-model="activityDialog.form.inviteCount" :min="1" style="width: 100%" placeholder="请输入邀请人数要求" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="好友注册奖励" prop="friendBonus">
                <el-input-number v-model="activityDialog.form.friendBonus" :min="0" style="width: 100%" placeholder="好友注册奖励积分" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div v-if="showConsumeConfig" class="dynamic-config">
          <el-divider content-position="left">消费返积分配置</el-divider>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="消费金额要求" prop="consumeAmount">
                <el-input-number v-model="activityDialog.form.consumeAmount" :min="0" :precision="2" style="width: 100%" placeholder="请输入消费金额要求" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="返积分比例" prop="returnRatio">
                <el-input-number v-model="activityDialog.form.returnRatio" :min="0" :max="100" :precision="2" style="width: 100%" placeholder="返积分比例(%)" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div v-if="showFestivalConfig" class="dynamic-config">
          <el-divider content-position="left">节日活动配置</el-divider>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="节日名称" prop="festivalName">
                <el-input v-model="activityDialog.form.festivalName" placeholder="请输入节日名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="积分倍数" prop="pointsMultiplier">
                <el-input-number v-model="activityDialog.form.pointsMultiplier" :min="1" :max="10" :precision="1" style="width: 100%" placeholder="积分倍数" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div v-if="showNewUserConfig" class="dynamic-config">
          <el-divider content-position="left">新用户专享配置</el-divider>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="新用户定义" prop="newUserDays">
                <el-input-number v-model="activityDialog.form.newUserDays" :min="1" :max="365" style="width: 100%" placeholder="注册后多少天内算新用户" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="专享奖励" prop="exclusiveBonus">
                <el-input-number v-model="activityDialog.form.exclusiveBonus" :min="0" style="width: 100%" placeholder="专享奖励积分" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <el-form-item label="活动描述" prop="desc">
          <el-input v-model="activityDialog.form.desc" type="textarea" :rows="3" placeholder="请输入活动描述" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="activityDialog.visible = false">取消</el-button>
        <el-button type="primary" @click="submitActivity" :loading="submitting">保存</el-button>
      </template>
    </el-dialog>

    <!-- 活动参与记录弹窗 -->
    <el-dialog v-model="recordDialog.visible" title="活动参与记录" width="1000px">
      <div class="record-header">
        <div class="record-info">
          <span class="record-title">活动：{{ getActivityName(recordDialog.activityId) }}</span>
          <span class="record-count">共 {{ recordDialog.page.total }} 条记录</span>
        </div>
        <el-button type="primary" size="small" @click="exportRecordData" :icon="Download">导出Excel</el-button>
      </div>
      <el-table :data="recordDialog.tableData" border size="small" v-loading="recordDialog.loading">
        <el-table-column prop="user" label="用户" width="120" />
        <el-table-column prop="participateTime" label="参与时间" width="160" />
        <el-table-column prop="points" label="获得积分" width="100">
          <template #default="scope">
            <span class="points-text">{{ scope.row.points }} 积分</span>
          </template>
        </el-table-column>
        <el-table-column prop="exp" label="获得经验值" width="100">
          <template #default="scope">
            <span v-if="scope.row.exp > 0" class="exp-text">{{ scope.row.exp }} 经验</span>
            <span v-else class="no-exp">无</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.status === '成功' ? 'success' : 'danger'" size="small">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" show-overflow-tooltip />
      </el-table>
      <el-pagination
        v-model:current-page="recordDialog.page.current"
        v-model:page-size="recordDialog.page.size"
        :total="recordDialog.page.total"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 50]"
        style="margin-top: 16px; text-align: right;"
      />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, nextTick, watch, onMounted } from 'vue'
import { ElMessage, ElForm, ElMessageBox } from 'element-plus'
import { 
  Plus, Search, Refresh, Edit, Document, Delete, Download,
  Promotion, VideoPlay, Clock, User, VideoPause
} from '@element-plus/icons-vue'
// 优惠券mock数据（可与CouponManage.vue保持同步）
const couponList = ref([
  { id: '1005', name: '单品特惠券', status: '发布' },
  { id: '1004', name: '无门槛券', status: '草稿' },
  { id: '1003', name: '夏日折扣券', status: '发布' },
  { id: '1002', name: '全场包邮券', status: '作废' },
  { id: '1001', name: '新用户满减券', status: '发布' }
])
const publishedCoupons = computed(() => couponList.value.filter(c => c.status === '发布'))

const typeOptions = ['邀请好友活动', '消费返积分活动', '新用户专享活动', '首单奖励活动', '完善资料奖励', '限时积分翻倍', '节日特殊活动']

// 统计数据
const stats = reactive({
  totalActivities: 5,
  activeActivities: 4,
  pendingActivities: 1,
  totalParticipants: 1679
})

// 加载状态
const loading = ref(false)
const submitting = ref(false)

const filter = reactive({ type: '', status: '', keyword: '' })

// 获取活动类型标签颜色
function getTypeTagType(type: string) {
  const typeMap: Record<string, string> = {
    '邀请好友活动': 'success',
    '消费返积分活动': 'primary',
    '新用户专享活动': 'warning',
    '首单奖励活动': 'info',
    '完善资料奖励': 'success',
    '限时积分翻倍': 'danger',
    '节日特殊活动': 'warning'
  }
  return typeMap[type] || 'info'
}

// 获取状态标签颜色
function getStatusTagType(status: string) {
  const statusMap: Record<string, string> = {
    '进行中': 'success',
    '待开始': 'warning',
    '已结束': 'info',
    '已暂停': 'danger'
  }
  return statusMap[status] || 'info'
}

// 动态配置显示控制
const showInviteConfig = computed(() => activityDialog.form.type === '邀请好友活动')
const showConsumeConfig = computed(() => activityDialog.form.type === '消费返积分活动')
const showFestivalConfig = computed(() => activityDialog.form.type === '节日特殊活动')
const showNewUserConfig = computed(() => activityDialog.form.type === '新用户专享活动')

// Mock数据
const allData = ref<any[]>([
  {
    id: 'A001',
    name: '邀请好友送积分',
    type: '邀请好友活动',
    rewardRule: '固定50积分',
    startTime: '2024-06-01 00:00:00',
    endTime: '2024-12-31 23:59:59',
    status: '进行中',
    participants: 156,
    totalReward: 7800,
    sort: 1,
    desc: '邀请好友注册成功奖励50积分',
    inviteLimit: 10,
    rewardMode: 'fixed',
    fixedPoints: 50,
    rewardPercentage: 0,
    exp: 20,
    minAmount: 0,
    dailyLimit: 0,
    tieredRules: [] as Array<{ minAmount: number; points: number }>,
    triggerCondition: 'register',
    multiplier: 1,
    applicableTasks: [] as string[],
    activityDesc: '',
    festivalType: 'custom',
    customFestivalName: '',
    festivalActivityType: '签到奖励',
    signinReward: [] as Array<{ day: number; points: number }>,
    festivalConsumePercentage: 0,
    festivalMultiplier: 1,
    specialTaskDesc: '',
    expTriggerCondition: 'daily',
    expTriggerDay: 1,
    festivalConsumeMode: 'percentage',
    festivalConsumeFixed: 10,
    festivalConsumeTiered: [] as Array<{ minAmount: number; points: number }>,
    festivalConsumeMinAmount: 0,
    festivalConsumeDailyLimit: 0,
    festivalApplicableTasks: [] as string[],
    festivalMultiplierDailyLimit: 0,
    festivalMultiplierTrigger: 'all',
    festivalMultiplierCount: 3,
    pointsExpireType: 'fixed', pointsExpireValue: 30, pointsExpireDesc: '',
    createTime: '2024-05-01 10:00:00'
  },
  {
    id: 'A002',
    name: '消费满100返积分',
    type: '消费返积分活动',
    rewardRule: '按10%比例返积分',
    startTime: '2024-06-01 00:00:00',
    endTime: '2024-12-31 23:59:59',
    status: '进行中',
    participants: 89,
    totalReward: 2340,
    sort: 2,
    desc: '消费满100元按10%比例返积分',
    inviteLimit: 0,
    rewardMode: 'percentage',
    fixedPoints: 0,
    rewardPercentage: 10,
    exp: 5,
    minAmount: 100,
    dailyLimit: 100,
    tieredRules: [],
    triggerCondition: 'register',
    multiplier: 1,
    applicableTasks: [],
    activityDesc: '',
    festivalType: 'custom',
    customFestivalName: '',
    festivalActivityType: '签到奖励',
    signinReward: [],
    festivalConsumePercentage: 0,
    festivalMultiplier: 1,
    specialTaskDesc: '',
    expTriggerCondition: 'daily',
    expTriggerDay: 1,
    festivalConsumeMode: 'percentage',
    festivalConsumeFixed: 10,
    festivalConsumeTiered: [],
    festivalConsumeMinAmount: 0,
    festivalConsumeDailyLimit: 0,
    festivalApplicableTasks: [],
    festivalMultiplierDailyLimit: 0,
    festivalMultiplierTrigger: 'all',
    festivalMultiplierCount: 3,
    pointsExpireType: 'fixed', pointsExpireValue: 30, pointsExpireDesc: '',
    createTime: '2024-05-02 11:00:00'
  },
  {
    id: 'A003',
    name: '新用户专享奖励',
    type: '新用户专享活动',
    rewardRule: '固定30积分',
    startTime: '2024-06-01 00:00:00',
    endTime: '2024-12-31 23:59:59',
    status: '进行中',
    participants: 234,
    totalReward: 7020,
    sort: 3,
    desc: '新用户注册专享积分奖励',
    inviteLimit: 0,
    rewardMode: 'fixed',
    fixedPoints: 30,
    rewardPercentage: 0,
    exp: 15,
    minAmount: 0,
    dailyLimit: 0,
    tieredRules: [],
    triggerCondition: 'register',
    multiplier: 1,
    applicableTasks: [],
    activityDesc: '',
    festivalType: 'custom',
    customFestivalName: '',
    festivalActivityType: '签到奖励',
    signinReward: [],
    festivalConsumePercentage: 0,
    festivalMultiplier: 1,
    specialTaskDesc: '',
    expTriggerCondition: 'daily',
    expTriggerDay: 1,
    festivalConsumeMode: 'percentage',
    festivalConsumeFixed: 10,
    festivalConsumeTiered: [],
    festivalConsumeMinAmount: 0,
    festivalConsumeDailyLimit: 0,
    festivalApplicableTasks: [],
    festivalMultiplierDailyLimit: 0,
    festivalMultiplierTrigger: 'all',
    festivalMultiplierCount: 3,
    pointsExpireType: 'fixed', pointsExpireValue: 30, pointsExpireDesc: '',
    createTime: '2024-05-03 12:00:00'
  },
  {
    id: 'A004',
    name: '双11积分翻倍活动',
    type: '限时积分翻倍',
    rewardRule: '2倍积分',
    startTime: '2024-11-01 00:00:00',
    endTime: '2024-11-11 23:59:59',
    status: '进行中',
    participants: 567,
    totalReward: 12340,
    sort: 4,
    desc: '双11期间完成指定任务可获得2倍积分奖励',
    inviteLimit: 0,
    rewardMode: 'fixed',
    fixedPoints: 0,
    rewardPercentage: 0,
    exp: 0,
    minAmount: 0,
    dailyLimit: 0,
    tieredRules: [],
    triggerCondition: 'register',
    multiplier: 2,
    applicableTasks: ['每日点赞', '阅读文章', '站内分享', '站外分享', '商品评价'],
    activityDesc: '活动期间，完成指定任务可获得积分翻倍奖励',
    festivalType: 'custom',
    customFestivalName: '',
    festivalActivityType: '签到奖励',
    signinReward: [],
    festivalConsumePercentage: 0,
    festivalMultiplier: 1,
    specialTaskDesc: '',
    expTriggerCondition: 'daily',
    expTriggerDay: 1,
    festivalConsumeMode: 'percentage',
    festivalConsumeFixed: 10,
    festivalConsumeTiered: [],
    festivalConsumeMinAmount: 0,
    festivalConsumeDailyLimit: 0,
    festivalApplicableTasks: [],
    festivalMultiplierDailyLimit: 0,
    festivalMultiplierTrigger: 'all',
    festivalMultiplierCount: 3,
    pointsExpireType: 'fixed', pointsExpireValue: 30, pointsExpireDesc: '',
    createTime: '2024-05-04 13:00:00'
  },
  {
    id: 'A005',
    name: '春节签到活动',
    type: '节日特殊活动',
    rewardRule: '春节特殊活动',
    startTime: '2024-02-10 00:00:00',
    endTime: '2024-02-17 23:59:59',
    status: '进行中',
    participants: 789,
    totalReward: 15670,
    sort: 5,
    desc: '春节期间连续签到可获得额外积分奖励',
    inviteLimit: 0,
    rewardMode: 'fixed',
    fixedPoints: 0,
    rewardPercentage: 0,
    exp: 10,
    minAmount: 0,
    dailyLimit: 0,
    tieredRules: [],
    triggerCondition: 'register',
    multiplier: 1,
    applicableTasks: [],
    activityDesc: '',
    festivalType: 'spring_festival',
    customFestivalName: '春节',
    festivalActivityType: '签到奖励',
    signinReward: [
      { day: 1, points: 10 },
      { day: 2, points: 15 },
      { day: 3, points: 20 },
      { day: 4, points: 25 },
      { day: 5, points: 30 },
      { day: 6, points: 35 },
      { day: 7, points: 50 }
    ],
    festivalConsumePercentage: 0,
    festivalMultiplier: 1,
    specialTaskDesc: '',
    expTriggerCondition: 'daily',
    expTriggerDay: 1,
    festivalConsumeMode: 'percentage',
    festivalConsumeFixed: 10,
    festivalConsumeTiered: [],
    festivalConsumeMinAmount: 0,
    festivalConsumeDailyLimit: 0,
    festivalApplicableTasks: [],
    festivalMultiplierDailyLimit: 0,
    festivalMultiplierTrigger: 'all',
    festivalMultiplierCount: 3,
    pointsExpireType: 'fixed', pointsExpireValue: 30, pointsExpireDesc: '',
    createTime: '2024-05-05 14:00:00'
  }
])

const page = reactive({ current: 1, size: 10, total: 0 })
const tableData = computed(() => {
  let data = allData.value
  if (filter.type) data = data.filter(row => row.type === filter.type)
  if (filter.status) data = data.filter(row => row.status === filter.status)
  if (filter.keyword) data = data.filter(row => row.name.includes(filter.keyword) || row.desc.includes(filter.keyword))
  page.total = data.length
  const startIdx = (page.current - 1) * page.size
  return data.slice(startIdx, startIdx + page.size)
})

function doFilter() { page.current = 1 }
function resetFilter() { filter.type = ''; filter.status = ''; filter.keyword = ''; page.current = 1 }

const activityDialog = reactive({
  visible: false,
  mode: 'add' as 'add' | 'edit',
  form: {
    id: '',
    name: '',
    type: '',
    points: 0,
    exp: 0,
    pointsExpireType: 'fixed', // fixed/relative
    pointsExpireValue: 30, // 有效期天数或到期日期
    pointsExpireDesc: '',
    startTime: '',
    endTime: '',
    activityTime: [] as string[],
    status: '草稿',
    sort: 1,
    desc: '',
    // 邀请好友活动
    inviteLimit: 10,
    inviteCount: 5,
    friendBonus: 20,
    rewardMode: 'fixed' as 'fixed' | 'percentage' | 'tiered',
    fixedPoints: 50,
    rewardPercentage: 10,
    // 消费返积分活动
    minAmount: 0,
    consumeAmount: 100,
    returnRatio: 10,
    dailyLimit: 0,
    tieredRules: [] as Array<{ minAmount: number; points: number }>,
    // 新用户专享活动
    triggerCondition: 'register' as 'register' | 'first_order' | 'complete_profile' | 'first_login',
    newUserDays: 7,
    exclusiveBonus: 30,
    // 限时积分翻倍
    multiplier: 1,
    applicableTasks: [] as string[],
    activityDesc: '',
    // 节日特殊活动
    festivalType: 'custom' as string,
    customFestivalName: '',
    festivalName: '',
    pointsMultiplier: 2,
    festivalActivityType: '签到奖励' as '签到奖励' | '消费返积分' | '任务积分翻倍' | '特殊任务',
    signinReward: [] as Array<{ day: number; points: number }>,
    festivalConsumePercentage: 0,
    festivalMultiplier: 1,
    specialTaskDesc: '',
    // 经验值触发条件
    expTriggerCondition: 'daily' as 'daily' | 'continuous' | 'milestone',
    expTriggerDay: 7,
    // 节日消费返积分
    festivalConsumeMode: 'percentage' as 'percentage' | 'fixed' | 'tiered',
    festivalConsumeFixed: 10,
    festivalConsumeTiered: [] as Array<{ minAmount: number; points: number }>,
    festivalConsumeMinAmount: 0,
    festivalConsumeDailyLimit: 0,
    // 节日任务积分翻倍
    festivalApplicableTasks: [] as string[],
    festivalMultiplierDailyLimit: 0,
    festivalMultiplierTrigger: 'all' as 'all' | 'first' | 'count',
    festivalMultiplierCount: 3,
    couponIds: [] as string[]
  }
})

const activityFormRef = ref<InstanceType<typeof ElForm> | null>(null)
const activityRules = {
  name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
  type: [{ required: true, message: '请选择活动类型', trigger: 'change' }],
  activityTime: [{ required: true, message: '请选择活动时间', trigger: 'change' }],
  status: [{ required: true, message: '请选择活动状态', trigger: 'change' }],
  sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
}

function onTypeChange(val: string) {
  // 根据活动类型设置默认值
  if (val === '邀请好友活动') {
    activityDialog.form.inviteLimit = 10
    activityDialog.form.rewardMode = 'fixed'
    activityDialog.form.fixedPoints = 50
    activityDialog.form.exp = 20
  } else if (val === '消费返积分活动') {
    activityDialog.form.rewardMode = 'percentage'
    activityDialog.form.rewardPercentage = 10
    activityDialog.form.minAmount = 100
    activityDialog.form.dailyLimit = 100
    activityDialog.form.exp = 5
  } else if (val === '新用户专享活动') {
    activityDialog.form.rewardMode = 'fixed'
    activityDialog.form.fixedPoints = 30
    activityDialog.form.exp = 15
  } else if (val === '首单奖励活动') {
    activityDialog.form.rewardMode = 'fixed'
    activityDialog.form.fixedPoints = 50
    activityDialog.form.exp = 25
    activityDialog.form.triggerCondition = 'first_order'
  } else if (val === '完善资料奖励') {
    activityDialog.form.rewardMode = 'fixed'
    activityDialog.form.fixedPoints = 20
    activityDialog.form.exp = 10
    activityDialog.form.triggerCondition = 'complete_profile'
  } else if (val === '节日特殊活动') {
    // 设置节日特殊活动的默认值
    activityDialog.form.festivalType = 'custom'
    activityDialog.form.customFestivalName = ''
    activityDialog.form.festivalActivityType = '签到奖励'
    activityDialog.form.expTriggerCondition = 'daily'
    activityDialog.form.expTriggerDay = 7
    // 初始化签到规则
    activityDialog.form.signinReward = [
      { day: 1, points: 10 },
      { day: 2, points: 15 },
      { day: 3, points: 20 }
    ]
  }
}

function addTieredRule() {
  try {
    if (!activityDialog.form.tieredRules) {
      activityDialog.form.tieredRules = []
    }
    const nextAmount = activityDialog.form.tieredRules.length > 0 
      ? Math.max(...activityDialog.form.tieredRules.map(r => r.minAmount)) + 50 
      : 100
    activityDialog.form.tieredRules.push({ minAmount: nextAmount, points: 10 })
  } catch (error) {
    console.error('添加阶梯规则错误:', error)
    activityDialog.form.tieredRules = [{ minAmount: 100, points: 10 }]
  }
}

function removeTieredRule(index: number) {
  try {
    if (activityDialog.form.tieredRules && activityDialog.form.tieredRules.length > index) {
      activityDialog.form.tieredRules.splice(index, 1)
    }
  } catch (error) {
    console.error('删除阶梯规则错误:', error)
    activityDialog.form.tieredRules = []
  }
}

function onFestivalChange(val: string) {
  console.log('节日类型变化:', val) // 添加调试日志
  
  // 根据节日类型设置默认值
  if (val === 'spring_festival') {
    activityDialog.form.customFestivalName = '春节'
  } else if (val === 'mid_autumn') {
    activityDialog.form.customFestivalName = '中秋节'
  } else if (val === 'national_day') {
    activityDialog.form.customFestivalName = '国庆节'
  } else if (val === 'double_11') {
    activityDialog.form.customFestivalName = '双11'
  } else if (val === 'double_12') {
    activityDialog.form.customFestivalName = '双12'
  } else if (val === 'new_year') {
    activityDialog.form.customFestivalName = '元旦'
  } else if (val === 'custom') {
    activityDialog.form.customFestivalName = ''
  }
  
  // 确保signinReward数组存在
  if (!activityDialog.form.signinReward) {
    activityDialog.form.signinReward = []
  }
}

function onFestivalActivityTypeChange(val: string) {
  console.log('节日活动类型变化:', val) // 添加调试日志
  
  if (val === '签到奖励') {
    // 如果选择签到奖励，初始化签到规则
    if (!activityDialog.form.signinReward || activityDialog.form.signinReward.length === 0) {
      activityDialog.form.signinReward = [
        { day: 1, points: 10 },
        { day: 2, points: 15 },
        { day: 3, points: 20 }
      ]
    }
  } else if (val === '消费返积分') {
    // 设置默认的消费返积分配置
    activityDialog.form.festivalConsumeMode = 'percentage'
    activityDialog.form.festivalConsumePercentage = 10
    activityDialog.form.festivalConsumeMinAmount = 100
    activityDialog.form.festivalConsumeDailyLimit = 100
    activityDialog.form.festivalConsumeTiered = [
      { minAmount: 100, points: 10 },
      { minAmount: 200, points: 25 },
      { minAmount: 500, points: 60 }
    ]
  } else if (val === '任务积分翻倍') {
    // 设置默认的任务积分翻倍配置
    activityDialog.form.festivalMultiplier = 2
    activityDialog.form.festivalApplicableTasks = ['每日点赞', '阅读文章', '站内分享', '站外分享', '商品评价']
    activityDialog.form.festivalMultiplierDailyLimit = 0
    activityDialog.form.festivalMultiplierTrigger = 'all'
    activityDialog.form.festivalMultiplierCount = 3
  } else if (val === '特殊任务') {
    // 清空特殊任务描述
    activityDialog.form.specialTaskDesc = ''
  }
}

function addSigninRule() {
  try {
    // 确保signinReward数组存在
    if (!activityDialog.form.signinReward) {
      activityDialog.form.signinReward = []
    }
    // 计算下一个天数
    const nextDay = activityDialog.form.signinReward.length + 1
    activityDialog.form.signinReward.push({ day: nextDay, points: 10 })
  } catch (error) {
    console.error('添加签到规则错误:', error)
    // 如果出错，重新初始化数组
    activityDialog.form.signinReward = [{ day: 1, points: 10 }]
  }
}

function removeSigninRule(index: number) {
  try {
    if (activityDialog.form.signinReward && activityDialog.form.signinReward.length > index) {
      activityDialog.form.signinReward.splice(index, 1)
      // 重新计算天数
      activityDialog.form.signinReward.forEach((rule, idx) => {
        rule.day = idx + 1
      })
    }
  } catch (error) {
    console.error('删除签到规则错误:', error)
    // 如果出错，重新初始化数组
    activityDialog.form.signinReward = []
  }
}

function addFestivalConsumeRule() {
  try {
    if (!activityDialog.form.festivalConsumeTiered) {
      activityDialog.form.festivalConsumeTiered = []
    }
    const nextAmount = activityDialog.form.festivalConsumeTiered.length > 0 
      ? Math.max(...activityDialog.form.festivalConsumeTiered.map(r => r.minAmount)) + 50 
      : 100
    activityDialog.form.festivalConsumeTiered.push({ minAmount: nextAmount, points: 10 })
  } catch (error) {
    console.error('添加节日消费规则错误:', error)
    activityDialog.form.festivalConsumeTiered = [{ minAmount: 100, points: 10 }]
  }
}

function removeFestivalConsumeRule(index: number) {
  try {
    if (activityDialog.form.festivalConsumeTiered && activityDialog.form.festivalConsumeTiered.length > index) {
      activityDialog.form.festivalConsumeTiered.splice(index, 1)
    }
  } catch (error) {
    console.error('删除节日消费规则错误:', error)
    activityDialog.form.festivalConsumeTiered = []
  }
}

function openActivityDialog(mode: 'add' | 'edit', row?: any) {
  activityDialog.mode = mode
  if (mode === 'add') {
    Object.assign(activityDialog.form, {
      id: '',
      name: '',
      type: '',
      points: 0,
      exp: 0,
      pointsExpireType: 'fixed', // fixed/relative
      pointsExpireValue: 30, // 有效期天数或到期日期
      pointsExpireDesc: '',
      startTime: '',
      endTime: '',
      activityTime: [],
      status: '草稿',
      sort: 1,
      desc: '',
      // 邀请好友活动
      inviteLimit: 10,
      inviteCount: 5,
      friendBonus: 20,
      rewardMode: 'fixed',
      fixedPoints: 50,
      rewardPercentage: 10,
      // 消费返积分活动
      minAmount: 0,
      consumeAmount: 100,
      returnRatio: 10,
      dailyLimit: 0,
      tieredRules: [],
      // 新用户专享活动
      triggerCondition: 'register',
      newUserDays: 7,
      exclusiveBonus: 30,
      // 限时积分翻倍
      multiplier: 1,
      applicableTasks: [],
      activityDesc: '',
      // 节日特殊活动
      festivalType: 'custom',
      customFestivalName: '',
      festivalName: '',
      pointsMultiplier: 2,
      festivalActivityType: '签到奖励',
      signinReward: [],
      festivalConsumePercentage: 0,
      festivalMultiplier: 1,
      specialTaskDesc: '',
      // 经验值触发条件
      expTriggerCondition: 'daily',
      expTriggerDay: 7,
      // 节日消费返积分
      festivalConsumeMode: 'percentage',
      festivalConsumeFixed: 10,
      festivalConsumeTiered: [],
      festivalConsumeMinAmount: 0,
      festivalConsumeDailyLimit: 0,
      // 节日任务积分翻倍
      festivalApplicableTasks: [],
      festivalMultiplierDailyLimit: 0,
      festivalMultiplierTrigger: 'all',
      festivalMultiplierCount: 3,
      couponIds: []
    })
  } else if (row) {
    Object.assign(activityDialog.form, { ...row })
    // 确保节日相关字段存在
    if (!activityDialog.form.festivalType) {
      activityDialog.form.festivalType = 'custom'
    }
    if (!activityDialog.form.customFestivalName) {
      activityDialog.form.customFestivalName = ''
    }
    if (!activityDialog.form.festivalActivityType) {
      activityDialog.form.festivalActivityType = '签到奖励'
    }
    if (!activityDialog.form.signinReward) {
      activityDialog.form.signinReward = []
    }
    if (!activityDialog.form.expTriggerCondition) {
      activityDialog.form.expTriggerCondition = 'daily'
    }
    if (!activityDialog.form.expTriggerDay) {
      activityDialog.form.expTriggerDay = 7
    }
  }
  activityDialog.visible = true
  nextTick(() => {
    activityFormRef.value?.clearValidate()
    // 如果是新增活动且选择了节日特殊活动，自动初始化签到规则
    if (mode === 'add' && activityDialog.form.type === '节日特殊活动' && activityDialog.form.festivalActivityType === '签到奖励') {
      if (!activityDialog.form.signinReward || activityDialog.form.signinReward.length === 0) {
        activityDialog.form.signinReward = [
          { day: 1, points: 10 },
          { day: 2, points: 15 },
          { day: 3, points: 20 }
        ]
      }
    }
    console.log('弹窗打开，当前表单数据:', activityDialog.form) // 添加调试日志
  })
}

function editActivity(row: any) {
  openActivityDialog('edit', row)
}

function submitActivity() {
  activityFormRef.value?.validate((valid: boolean) => {
    if (!valid) return
    
    // 处理活动时间
    let startTime = activityDialog.form.startTime
    let endTime = activityDialog.form.endTime
    // 兼容activityTime数组
    if ((!startTime || !endTime) && activityDialog.form.activityTime && activityDialog.form.activityTime.length === 2) {
      startTime = activityDialog.form.activityTime[0]
      endTime = activityDialog.form.activityTime[1]
    }
    // 回写到form，保证mock数据和表格回显
    activityDialog.form.startTime = startTime
    activityDialog.form.endTime = endTime
    
    // 生成奖励规则描述
    let rewardRule = ''
    if (activityDialog.form.type === '邀请好友活动') {
      if (activityDialog.form.rewardMode === 'fixed') {
        rewardRule = `固定${activityDialog.form.fixedPoints}积分`
      } else {
        rewardRule = `按${activityDialog.form.rewardPercentage}%比例`
      }
    } else if (activityDialog.form.type === '消费返积分活动') {
      if (activityDialog.form.rewardMode === 'fixed') {
        rewardRule = `固定${activityDialog.form.fixedPoints}积分`
      } else if (activityDialog.form.rewardMode === 'percentage') {
        rewardRule = `按${activityDialog.form.rewardPercentage}%比例返积分`
      } else {
        rewardRule = '阶梯奖励'
      }
    } else if (activityDialog.form.type === '新用户专享活动') {
      if (activityDialog.form.rewardMode === 'fixed') {
        rewardRule = `固定${activityDialog.form.fixedPoints}积分`
      } else {
        rewardRule = `按${activityDialog.form.rewardPercentage}%比例`
      }
    } else if (activityDialog.form.type === '首单奖励活动') {
      if (activityDialog.form.rewardMode === 'fixed') {
        rewardRule = `固定${activityDialog.form.fixedPoints}积分`
      } else {
        rewardRule = `按${activityDialog.form.rewardPercentage}%比例`
      }
    } else if (activityDialog.form.type === '完善资料奖励') {
      if (activityDialog.form.rewardMode === 'fixed') {
        rewardRule = `固定${activityDialog.form.fixedPoints}积分`
      } else {
        rewardRule = `按${activityDialog.form.rewardPercentage}%比例`
      }
    } else if (activityDialog.form.type === '限时积分翻倍') {
      rewardRule = `${activityDialog.form.multiplier}倍积分`
    } else if (activityDialog.form.type === '节日特殊活动') {
      rewardRule = `${activityDialog.form.customFestivalName}特殊活动`
    } else {
      rewardRule = `固定${activityDialog.form.fixedPoints}积分`
    }
    
    if (activityDialog.mode === 'add') {
      const newId = 'A' + (Math.floor(Math.random() * 9000) + 1000)
      const newActivity = { 
        ...activityDialog.form, 
        id: newId,
        rewardRule,
        startTime,
        endTime,
        participants: 0,
        totalReward: 0,
        createTime: new Date().toISOString().slice(0, 19).replace('T', ' ')
      }
      allData.value.unshift(newActivity)
      ElMessage.success('新增成功（mock）')
    } else {
      const idx = allData.value.findIndex(item => item.id === activityDialog.form.id)
      if (idx > -1) {
        allData.value[idx] = { ...allData.value[idx], ...activityDialog.form, rewardRule, startTime, endTime }
        if (!allData.value[idx].createTime) {
          allData.value[idx].createTime = new Date().toISOString().slice(0, 19).replace('T', ' ')
        }
        ElMessage.success('编辑成功（mock）')
      }
    }
    activityDialog.visible = false
  })
}

function toggleStatus(row: any) {
  if (row.status === '进行中') {
    row.status = '已暂停'
  } else if (row.status === '已暂停') {
    row.status = '进行中'
  } else if (row.status === '草稿') {
    row.status = '进行中'
  }
  ElMessage.success('状态已更新')
}

function deleteActivity(row: any) {
  allData.value = allData.value.filter(item => item.id !== row.id)
  ElMessage.success('删除成功')
}

// 参与记录mock
const mockRecords = [
  { activityId: 'A001', user: '张三/1001', participateTime: '2024-06-10 10:00', triggerInfo: '邀请好友注册', points: 50, exp: 20, status: '成功', remark: '邀请好友注册成功' },
  { activityId: 'A002', user: '李四/1002', participateTime: '2024-06-11 14:20', triggerInfo: '消费120元', points: 12, exp: 5, status: '成功', remark: '消费满100元返积分' },
  { activityId: 'A001', user: '王五/1003', participateTime: '2024-06-12 09:30', triggerInfo: '邀请好友注册', points: 50, exp: 20, status: '成功', remark: '邀请好友注册成功' },
  { activityId: 'A003', user: '赵六/1004', participateTime: '2024-06-13 16:45', triggerInfo: '新用户注册', points: 30, exp: 15, status: '成功', remark: '新用户注册专享奖励' },
  { activityId: 'A002', user: '小明/1005', participateTime: '2024-06-14 11:20', triggerInfo: '消费200元', points: 20, exp: 5, status: '成功', remark: '消费满100元返积分' }
]

const recordDialog = reactive({ visible: false, activityId: '', tableData: [] as any[], page: { current: 1, size: 5, total: 0 }, loading: false })

function openRecordDialog(row: any) {
  recordDialog.activityId = row.id
  recordDialog.visible = true
  recordDialog.page.current = 1
  loadRecordPage()
}

function loadRecordPage() {
  const all = mockRecords.filter(r => r.activityId === recordDialog.activityId)
  recordDialog.page.total = all.length
  const start = (recordDialog.page.current - 1) * recordDialog.page.size
  recordDialog.tableData = all.slice(start, start + recordDialog.page.size)
}

watch(() => recordDialog.page.current, () => {
  loadRecordPage()
})

function getActivityName(activityId: string) {
  const activity = allData.value.find(item => item.id === activityId)
  return activity ? activity.name : '未知活动'
}

function exportRecordData() {
  const activityName = getActivityName(recordDialog.activityId)
  const data = recordDialog.tableData.map(record => ({
    '活动名称': activityName,
    '用户': record.user,
    '参与时间': record.participateTime,
    '触发信息': record.triggerInfo,
    '获得积分': record.points,
    '获得经验值': record.exp,
    '备注': record.remark
  }))

  import('xlsx').then((XLSX) => {
    try {
      const ws = XLSX.utils.json_to_sheet(data)
      const wb = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(wb, ws, '活动参与记录')
      XLSX.writeFile(wb, `${activityName}参与记录.xlsx`)
      ElMessage.success('导出成功')
    } catch (error: any) {
      ElMessage.error('导出失败：' + error.message)
    }
  }).catch(() => {
    ElMessage.error('导出失败：XLSX库未安装')
  })
}
</script>

<style scoped>
.points-activity-container {
  padding: 24px;
  background: #f5f7fa;
  min-height: calc(100vh - 120px);
}
.activity-content-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.page-header {
  margin-bottom: 24px;
}
.page-header h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}
.page-desc {
  margin: 0;
  color: #909399;
  font-size: 14px;
}
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
  width: 100%;
  box-sizing: border-box;
}
.stat-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
  background: #fff;
}
.stat-card:hover {
  transform: translateY(-2px);
}
.stat-content {
  display: flex;
  align-items: center;
  padding: 20px;
}
.stat-icon {
  font-size: 32px;
  margin-right: 16px;
  color: #409eff;
}
.stat-icon.active {
  color: #67c23a;
}
.stat-icon.warning {
  color: #e6a23c;
}
.stat-icon.success {
  color: #909399;
}
.stat-info {
  flex: 1;
}
.stat-number {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
}
.stat-label {
  font-size: 14px;
  color: #909399;
}
.main-content.align-card {
  margin: 0;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  background: #fff;
  width: 100%;
  box-sizing: border-box;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ebeef5;
}
.header-left {
  flex: 1;
}
.header-left h3 {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}
.activity-count {
  font-size: 14px;
  color: #909399;
}
.filter-bar {
  margin-bottom: 20px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 6px;
}

.el-table .points-text {
  color: #f56c6c;
  font-weight: bold;
}

.el-table .exp-text {
  color: #67c23a;
  font-weight: bold;
}

.el-table .no-exp {
  color: #909399;
}

.el-table .participants-text {
  color: #409eff;
  font-weight: bold;
}

.dynamic-config {
  margin: 20px 0;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 4px solid #409eff;
}

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ebeef5;
}

.record-info {
  display: flex;
  align-items: baseline;
}

.record-title {
  font-size: 16px;
  font-weight: 600;
  margin-right: 12px;
  color: #303133;
}

.record-count {
  font-size: 14px;
  color: #909399;
}

:deep(.el-tabs__header) {
  margin-bottom: 24px;
}

:deep(.el-form-item) {
  margin-bottom: 20px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #303133;
}

:deep(.el-divider__text) {
  font-weight: 600;
  color: #409eff;
}

.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  align-items: center;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .points-activity-container {
    padding: 16px;
  }
  
  .stats-cards {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
  }
  
  .main-content {
    padding: 16px;
  }
}

@media (max-width: 768px) {
  .stats-cards {
    grid-template-columns: 1fr;
  }
  
  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .filter-bar {
    padding: 12px;
  }
  
  .filter-bar .el-form-item {
    margin-bottom: 12px;
  }
}
</style> 